<template>
  <div :class="cn(className, !readonly && 'cursor-pointer select-none')">
      <PortalToFollowElem
        v-model:open="open"
        placement='bottom-start'
        :offset="4"
      >
        <template #trigger>
          <div class='flex h-8 items-center justify-between rounded-lg border-0 bg-gray-100 px-2.5 text-[13px] text-gray-900'>
            <div class='w-0 grow truncate capitalize' title={value}>{value}</div>
            <RiArrowDownSLine class='h-3.5 w-3.5 shrink-0 text-gray-700' />
          </div>
        </template>
        <PortalToFollowElemContent style="{
          zIndex: 100,
        }">
          <div class='w-[120px] rounded-lg bg-white p-1 shadow-sm'>
              <div
                v-for="type in TYPES"
                :key="type"
                class='flex h-[30px] cursor-pointer items-center justify-between rounded-lg pl-3 pr-2 text-[13px] text-gray-900 hover:bg-gray-100'
                @Click="handleChange(type)"
              >
                <div class='w-0 grow truncate capitalize'>{{type}}</div>
                <Check v-if="type === value" class='h-4 w-4 shrink-0 text-primary-600' />
              </div>
          </div>
        </PortalToFollowElemContent>
      </PortalToFollowElem>
    </div>
</template>
<script setup lang="ts" name="VarReferencePicker">
import { RiArrowDownSLine } from '@remixicon/vue'
import cn from '@/utils/classnames'
import PortalToFollowElem from '@/components/portal-to-follow-elem/index.vue'
import { Check } from '@/app/components/base/icons/src/vender/line/general'
import { VarType } from '@/app/components/workflow/types'
import {ref} from 'vue';


type Props = {
  className?: string
  readonly: boolean
  value: string
  onChange: (value: string) => void
}

const props = defineProps<Props>();

const TYPES = [VarType.string, VarType.number, VarType.arrayNumber, VarType.arrayString, VarType.arrayObject, VarType.object]
const open = ref(false)

const handleChange = (type: string) => {
    open.value = false
    props.onChange(type)
}

</script>

